<template>
  <a-input-group>
    <a-input v-model="iconType" allow-clear readonly />
    <a-trigger :popup-translate="[-110, 10]" show-arrow trigger="click">
      <a-button :style="{ width: '60px' }">
        <template #icon>
          <icon :icon="iconType ? iconType : 'mosaic'" />
        </template>
      </a-button>
      <template #content>
        <div class="arrow">
          <a-scrollbar style="height: 200px; overflow: auto" type="track">
            <ul class="icon-list">
              <li v-for="(icon, index) in menuIcons" :key="index" class="icon-item" @click="changeIcon(icon)">
                <div class="icon-item-component">
                  <icon :icon="icon" />
                </div>
              </li>
            </ul>
          </a-scrollbar>
        </div>
      </template>
    </a-trigger>
  </a-input-group>
</template>

<script setup name="MenuIcon" lang="ts">
const menuIcons = ref([
  "arrow-down",
  "arrow-fall",
  "arrow-left",
  "arrow-right",
  "arrow-rise",
  "arrow-up",
  "caret-down",
  "caret-left",
  "caret-right",
  "caret-up",
  "double-down",
  "double-left",
  "double-right",
  "double-up",
  "down-circle",
  "down",
  "drag-arrow",
  "expand",
  "left-circle",
  "left",
  "menu-fold",
  "menu-unfold",
  "right-circle",
  "right",
  "rotate-left",
  "rotate-right",
  "shrink",
  "swap",
  "to-bottom",
  "to-left",
  "to-right",
  "to-top",
  "up-circle",
  "up",
  "check-circle-fill",
  "close-circle-fill",
  "exclamation-circle-fill",
  "exclamation-polygon-fill",
  "info-circle-fill",
  "minus-circle-fill",
  "plus-circle-fill",
  "question-circle-fill",
  "check-circle",
  "check-square",
  "check",
  "clock-circle",
  "close-circle",
  "close",
  "exclamation-circle",
  "exclamation",
  "info-circle",
  "info",
  "minus-circle",
  "minus",
  "plus-circle",
  "plus",
  "question-circle",
  "question",
  "stop",
  "heart-fill",
  "star-fill",
  "thumb-down-fill",
  "thumb-up-fill",
  "at",
  "cloud-download",
  "code-block",
  "code-square",
  "code",
  "customer-service",
  "download",
  "export",
  "eye-invisible",
  "eye",
  "heart",
  "history",
  "home",
  "import",
  "launch",
  "list",
  "message-banned",
  "message",
  "more-vertical",
  "more",
  "poweroff",
  "refresh",
  "reply",
  "save",
  "scan",
  "search",
  "select-all",
  "send",
  "settings",
  "share-alt",
  "share-external",
  "share-internal",
  "star",
  "sync",
  "thumb-down",
  "thumb-up",
  "translate",
  "upload",
  "voice",
  "align-center",
  "align-left",
  "align-right",
  "attachment",
  "bg-colors",
  "bold",
  "brush",
  "copy",
  "delete",
  "edit",
  "eraser",
  "filter",
  "find-replace",
  "font-colors",
  "formula",
  "h1",
  "h2",
  "h3",
  "h4",
  "h5",
  "h6",
  "h7",
  "highlight",
  "italic",
  "line-height",
  "link",
  "oblique-line",
  "ordered-list",
  "original-size",
  "paste",
  "quote",
  "redo",
  "scissor",
  "sort-ascending",
  "sort-descending",
  "sort",
  "strikethrough",
  "underline",
  "undo",
  "unordered-list",
  "zoom-in",
  "zoom-out",
  "mute-fill",
  "pause-circle-fill",
  "play-arrow-fill",
  "play-circle-fill",
  "skip-next-fill",
  "skip-previous-fill",
  "sound-fill",
  "backward",
  "forward",
  "fullscreen-exit",
  "fullscreen",
  "live-broadcast",
  "music",
  "mute",
  "pause-circle",
  "pause",
  "play-arrow",
  "play-circle",
  "record-stop",
  "record",
  "skip-next",
  "skip-previous",
  "sound",
  "bytedance-color",
  "lark-color",
  "tiktok-color",
  "xigua-color",
  "faceBook-circle-fill",
  "facebook-square-fill",
  "google-circle-fill",
  "qq-circle-fill",
  "twitter-circle-fill",
  "weibo-circle-fill",
  "alipay-circle",
  "code-sandbox",
  "codepen",
  "facebook",
  "github",
  "gitlab",
  "google",
  "qq-zone",
  "qq",
  "twitter",
  "wechat",
  "wechatpay",
  "weibo",
  "chinese-fill",
  "english-fill",
  "face-frown-fill",
  "face-meh-fill",
  "face-smile-fill",
  "moon-fill",
  "pen-fill",
  "sun-fill",
  "apps",
  "archive",
  "bar-chart",
  "book",
  "bookmark",
  "branch",
  "bug",
  "bulb",
  "calendar-clock",
  "calendar",
  "camera",
  "cloud",
  "command",
  "common",
  "compass",
  "computer",
  "copyright",
  "dashboard",
  "desktop",
  "dice",
  "drag-dot-vertical",
  "drag-dot",
  "drive-file",
  "ear",
  "email",
  "empty",
  "experiment",
  "file-audio",
  "file-image",
  "file-pdf",
  "file-video",
  "file",
  "fire",
  "folder-add",
  "folder-delete",
  "folder",
  "gift",
  "idcard",
  "image-close",
  "image",
  "interaction",
  "language",
  "layers",
  "layout",
  "loading",
  "location",
  "lock",
  "loop",
  "man",
  "menu",
  "mind-mapping",
  "mobile",
  "moon",
  "mosaic",
  "nav",
  "notification-close",
  "notification",
  "palette",
  "pen",
  "phone",
  "printer",
  "public",
  "pushpin",
  "qrcode",
  "relation",
  "robot-add",
  "robot",
  "safe",
  "schedule",
  "shake",
  "skin",
  "stamp",
  "storage",
  "subscribe-add",
  "subscribe",
  "subscribed",
  "sun",
  "tag",
  "tags",
  "thunderbolt",
  "tool",
  "trophy",
  "unlock",
  "user-add",
  "user-group",
  "user",
  "video-camera",
  "wifi",
  "woman"
]);
const iconType = ref<string>();

const form = inject("formModel");
iconType.value = form.value.icon;
const emit = defineEmits(["handOff"]);

const changeIcon = (icon: string) => {
  iconType.value = icon;
  emit("handOff", icon);
};
</script>

<style scoped>
.icon-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-item {
  position: relative;
  box-sizing: border-box;
  padding: 0.5em;
  border: 1px solid var(--color-border);
  cursor: pointer;
  margin-right: 3px;
  margin-bottom: 3px;
  transition: all 0.2s ease;
}

.icon-item-component {
  font-size: 16px;
  text-align: center;
}
.arrow {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  padding: 10px;
  width: 300px;
  background-color: var(--color-bg-popup);
  border-radius: 4px;
}
</style>
